<template>
  <div class="pageBox">
    <head-component title="兑换记录"></head-component>
    <div class="content">
      <van-list
        v-model:loading="lBox.loading"
        :finished="lBox.finished"
        @load="onLoad"
      >
        <div class="list">
          <div class="listItem" v-for="item in list" :key="item.id">
            <div class="top">申请兑换</div>
            <div class="bom flex-between">
              <p>{{ item.createdAt }}</p>
              <span>-{{ item.money }}</span>
            </div>
            <!-- status 兑换状态 状态。0：申请中；1：成功；-1：失败 -->
            <div class="status status2 flex-center" v-if="item.status === 0" >审核中</div>
            <div class="status status2 flex-center" v-else-if="item.status === 1" >审核通过</div>
            <div class="status flex-center" v-else >审核拒绝</div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent } from "vue";
import headComponent from "../../components/headComponent.vue";
import { onLoadList } from "@/setup/loadList.js";
import { post } from "../../untils/request";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    const { onLoad, list, lBox } = onLoadList({
      form: {
        lastId: 0,
        page: 1,
      },
      handler: (form) =>
        post("/portal", {
          module: "Finance",
          interface: "7002",
          data: form,
        }),
      afterResponse(res) {
        console.log(res);
      },
    });

    return {
      onLoad,
      list,
      lBox,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-top: 88px;
  .content {
    padding: 20px 30px;
    .list {
      .listItem {
        width: 100%;
        height: 188px;
        background: #ffffff;
        box-shadow: 0px 4px 12px 0px rgba(223, 207, 207, 0.5);
        border-radius: 20px;
        margin-bottom: 20px;
        padding: 40px 30px;
        position: relative;
        .top {
          font-size: 32px;
          font-weight: 500;
          color: #333333;
        }
        .bom {
          margin-top: 30px;
          p {
            font-size: 24px;
            font-weight: 400;
            color: #999999;
          }
          span {
            font-size: 26px;
            font-weight: 400;
            color: #e00b12;
          }
        }
        .status {
          width: 120px;
          height: 54px;
          background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
          border-radius: 0px 20px 0px 20px;
          position: absolute;
          right: 0;
          top: 0;
          font-size: 22px;
          font-weight: 400;
          color: #f5f5f5;
        }
        .status2 {
          background: linear-gradient(138deg, #8655dc 0%, #c571d9 100%);
        }
      }

      .listItem:nth-last-of-type(1) {
        margin-bottom: 0;
      }
    }
  }
}
</style>